<template>
  <a-modal v-model:visible="visible" title="设置多账户出价" width="800px" :maskClosable="false" @ok="handleOk" @cancel="handleCancel">
    <div class="modal-content">
      <div v-if="!accounts.length" class="empty-accounts">暂无可配置的账户</div>
      <div v-else class="account-list">
        <div v-for="account in accounts" :key="account._id" class="account-bid-item">
          <div class="account-info">
            <div class="account-name">{{ account.Name }}</div>
            <div class="account-id">ID: {{ account._id }}</div>
          </div>
          <div class="bid-config">
            <CampaignBid 
              v-model="bidSettings[account._id]"
              :minBid="3"
              :maxBid="100"
              :precision="2"
            />
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import CampaignBid from "@/pages/NewBatchCreateAd/components/common/CampaignBid.vue";

// 定义组件事件
const emit = defineEmits(["update"]);

// 弹框可见性
const visible = ref(false);

// 账户列表
const accounts = ref<any[]>([]);

// 各账户的出价设置
const bidSettings = reactive<Record<number, any>>({});

// 打开弹框
const show = (currentBidMap: any, accountList: any[] = []) => {
  visible.value = true;
  accounts.value = accountList;

  // 初始化各账户的出价设置
  accounts.value.forEach((account) => {
    const accountId = account._id;

    // 获取当前账户的出价设置，如果没有则使用统一设置
    const accountSetting = currentBidMap[accountId] ||
      currentBidMap.unified || {
        type: "NORMAL_BID",
        value: 3,
      };

    // 设置账户出价
    bidSettings[accountId] = {
      type: accountSetting.type,
      value: accountSetting.value,
    };
  });
};

// 确认按钮处理
const handleOk = () => {
  // 构建最终的数据格式
  const finalBidMap: Record<string, any> = {
    unified: {
      type: "NORMAL_BID",
      value: 3,
    },
  };

  // 添加各账户的设置
  accounts.value.forEach((account) => {
    const accountId = account._id;

    if (bidSettings[accountId]) {
      finalBidMap[accountId] = bidSettings[accountId];
    }
  });

  // 发送更新事件
  emit("update", finalBidMap);

  // 关闭弹框
  visible.value = false;
};

// 取消按钮处理
const handleCancel = () => {
  visible.value = false;
};

// 暴露组件方法
defineExpose({
  show,
});
</script>

<style scoped lang="less">
.modal-content {
  max-height: 600px;
  overflow-y: auto;
}

.empty-accounts {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #999;
}

.account-list {
  width: 100%;
}

.account-bid-header {
  display: flex;
  padding: 8px 16px;
  background-color: #fafafa;
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: bold;
}

.header-title {
  flex: 1;
  text-align: center;
}

.header-title:first-child {
  flex: 1;
  text-align: left;
}

.account-bid-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.account-info {
  flex: 1;
  padding-top: 8px;
}

.account-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.account-id {
  color: #999;
  font-size: 12px;
}

.bid-config {
  flex: 2;
}
</style>
